<template>
	<uv-popup ref="popup" mode="bottom" round="20" zIndex="99999">
		<view class="flex-cloumn">
			<view class="scroll">
				<view class="left">
					<view class="top-label">热门</view>
					<view :class="activeGames === `hot-${item.id}` ? 'active-games-box' : 'games-box'"
						v-for="(item, index) in gamesList.gamesInfoList" :key="index" @click="handleClick(item, null, 1)">

						<view v-if="item.id === 0" style="width: 100%;display: flex;">
							<image src="@/static/receive/all_games.png" mode="aspectFill" class="img"></image>
							<view class="gamesName-box">
								<view :class="(activeGames === `hot-${item.id}` ? 'active-name' : 'name') + ' oneLineOverflow'">
									{{ item.name }}
								</view>
								<view :class="(activeGames === `hot-${item.id}` ? 'active-num' : 'num') + ' oneLineOverflow'">
									({{ allOrderNumber }})</view>
							</view>
						</view>

						<view v-else style="width: 100%;display: flex;">
							<image :src="replaceUrl(item.iconUrl)" mode="aspectFill" class="img"></image>
							<view class="gamesName-box">
								<view :class="(activeGames === `hot-${item.id}` ? 'active-name' : 'name') + ' oneLineOverflow'">
									{{ item.name }}
								</view>
								<!-- item.orderNum * 3 装逼用 -->
								<view :class="(activeGames === `hot-${item.id}` ? 'active-num' : 'num') + ' oneLineOverflow'">
									({{ item.code === "001" ? item.orderNum * 3 : item.orderNum }})</view>
							</view>
						</view>
					</view>
					<block v-for="(i, j) in gamesList.gamesInfoLetterVoList" :key="j">
						<view class="top-label">
							{{ i.letter }}
						</view>
						<view :class="activeGames === `${i.letter}-${item.id}` ? 'active-games-box' : 'games-box'"
							v-for="(item, index) in i.letterVo" :key="index" @click="handleClick(item, i, 2)">
							<image :src="replaceUrl(item.iconUrl)" mode="aspectFill" class="img"></image>
							<view class="gamesName-box">
								<view :class="(activeGames === `${i.letter}-${item.id}` ? 'active-name' : 'name') + ' oneLineOverflow'">
									{{ item.name }}
								</view>
								<view :class="(activeGames === `${i.letter}-${item.id}` ? 'active-num' : 'num') + ' oneLineOverflow'">
									({{ item.orderNum }})</view>
							</view>
						</view>
					</block>
				</view>
				<view class="right">
					<view
						:class="(activeDistrict === 0 || gamesTypeTagRegionList?.length === isAllAndroid_IOS?.length ? 'active-region' : 'region') + ' title'"
						@click="handleActive({
							regionName: '',
							id: 0
						})">全部区服</view>
					<view class="region-box">
						<view :class="isAllAndroid_IOS?.some(i => i === item.id) ? 'active-region' : 'region'"
							v-for="(item, index) in gamesTypeTagRegionList" :key="index" @click="handleActive(item)">
							{{ item.regionName }}
						</view>
					</view>
				</view>
			</view>
			<view class="border"></view>
			<view class="btn-box">
				<view class="btn1" @click="reset">重置</view>
				<view class="btn2" @click="submit">确认</view>
			</view>
		</view>
	</uv-popup>
</template>
<script setup>
	import {
		ref,
		computed,
		reactive,
		watch
	} from 'vue'
	import {
		GetAllGamesListApi
	} from '@/api/modules/orders.js'
	import {
		replaceUrl
	} from '@/utils';
	import useStore from '@/stores';
	const {
		globalStore
	} = useStore()
	const isShowAction = ref(false)
	const popup = ref()
	const activeGames = ref("") //选中左侧游戏
	const activeDistrict = ref(null) //选中区服
	const gamesName = ref("全部") //传递父级游戏名称
	const gamesTypeTagRegionList = ref([]) //右侧区服数据
	const gamesList = ref({})
	const leftGamesName = ref("") //左侧游戏名称
	const leftCode = ref("") //左侧id
	const WZRY_CODE = ref("") //王者荣耀编码
	//左侧选中
	const handleClick = (item, i, type) => {
		if (type === 1) {
			activeGames.value = `hot-${item.id}`
		} else {
			activeGames.value = `${i.letter}-${item.id}`
		}
		leftGamesName.value = item.name
		gamesName.value = item.name
		leftCode.value = item.code
		if (gamesName.value === "全部" || gamesName.value === "全部游戏") {
			activeDistrict.value = 0
		}
		gamesTypeTagRegionList.value = item.gamesTypeTagRegionList
		// if(!isAllAndroid_IOS.value?.length || !isAllAndroid_IOS.value) {
		// 	isAllAndroid_IOS.value = gamesTypeTagRegionList.value?.map((i) => i.id)
		// }
	}
	//如果两个名称不一样 区服id置0
	watch(() => leftGamesName.value, (newVal, oldVal) => {
		if (newVal !== oldVal) {
			activeDistrict.value = 0
			isAllAndroid_IOS.value = []
		}
	})
	//右侧选中
	const isAllAndroid_IOS = ref([])
	const handleActive = item => {
		gamesName.value = leftGamesName.value
		activeDistrict.value = item.id
		if (item.id === 0) {
			isAllAndroid_IOS.value = gamesTypeTagRegionList.value?.map((i) => i.id)
			return
		}

		const idx = isAllAndroid_IOS.value?.findIndex(i => item.id === i)
		if (idx > -1) {
			if (isAllAndroid_IOS.value?.length === 1) {
				uni.showToast({
					title: '至少保留一项',
					icon: 'none'
				})
				return
			}
			isAllAndroid_IOS.value.splice(idx, 1)
		} else {
			isAllAndroid_IOS.value?.push(item.id)
		}

		let regionName = ""
		isAllAndroid_IOS.value.forEach(item => {
			gamesTypeTagRegionList.value.forEach(j => {
				if (item === j.id) {
					regionName += j.regionName
				}
			})
		})

		gamesName.value = leftGamesName.value + regionName
	}
	const emit = defineEmits(['gamesSubmit'])

	const submitActiveGamesId = ref(null)
	const submitActiveDistrict = ref(null)
	const submit = () => {
		if (activeGames.value) {
			const gamesId = activeGames.value.split('-')[1]
			const current = gamesList.value.gamesInfoList.findIndex((i)=> i.code === leftCode.value)
			const params = {
				gamesName: gamesName.value,
				gamesRegionId: activeDistrict.value,
				gamesRegionIdList: isAllAndroid_IOS.value,
				code: leftCode.value,
				gamesId: gamesId * 1 === 0 ? '' : gamesId,
				current
			}

			submitActiveGamesId.value = activeGames.value
			submitActiveDistrict.value = activeDistrict.value

			emit('gamesSubmit', params)
		}

		close()
	}

	const allOrderNumber = ref(0)
	//打开
	const open = () => {
		allOrderNumber.value = 0
		GetAllGamesListApi().then(({
			data
		}) => {
			data.gamesInfoList.unshift({
				id: 0,
				name: "全部游戏"
			})

			data.gamesInfoLetterVoList.forEach(item => {
				item.letterVo.forEach(i => {
					// item.orderNum * 3 装逼用
					if (i.code === "001") i.orderNum = i.orderNum * 3
					allOrderNumber.value += (i.orderNum * 1)
				})
			})

			gamesList.value = data
			if (gamesName.value !== "全部" && gamesName.value !== "全部游戏") {
				const flag = activeGames.value.includes("hot")
				const parentId = activeGames.value.split("-")

				if (flag) {
					const parent = data.gamesInfoList.filter(item => {
						if (item.id === parentId[1] * 1) {
							return item
						}
					})
					handleClick(parent[0], null, 1)
				} else {
					let params = []
					data.gamesInfoLetterVoList.forEach(item => {
						item?.letterVo.forEach(i => {
							if (i.id * 1 === parentId[1] * 1) {
								params.push({
									item,
									letter: item.letter,
									letterVo: [i]
								})
							}
						})
					})
					handleClick(params[0]?.letterVo[0], params[0].item, 2)
				}
			} else {
				handleClick({
					id: 0,
					name: "全部游戏"
				}, null, 1)
			}

			// isShowAction.value = true
			popup.value.open()
		})
	}
	//重置
	const reset = () => {
		activeGames.value = null
		activeDistrict.value = null
		submitActiveGamesId.value = null
		gamesName.value = "全部"
		emit('gamesSubmit', {
			gamesName: "全部",
			gamesRegionId: "",
			gamesId: ""
		})
		close()
	}
	//关闭
	const close = (type) => {
		// isShowAction.value = false
		popup.value.close()
		gamesTypeTagRegionList.value = []

		// 	解决不点击确定点击遮罩选中值回显问题
		activeGames.value = submitActiveGamesId.value
		activeDistrict.value = submitActiveDistrict.value
		if (!submitActiveGamesId.value) {
			activeDistrict.value = null
			gamesName.value = "全部"
		}

	}

	// 更改弹窗状态
	const toggle = gamesId => {
		// // 关闭
		// if (isShowAction.value) {
		// 	return close()
		// }
		// 打开
		
		open()

	}

	defineExpose({
		close,
		toggle,
		reset
	})
</script>
<style scoped lang="scss">
	.flex-cloumn {
		display: flex;
		flex-direction: column;


		.scroll {
			display: flex;
			max-height: 800rpx;
			padding-top: 20rpx;

			.left {
				width: 320rpx;
				overflow: auto;

				.img {
					width: 72rpx;
					min-width: 72rpx;
					height: 72rpx;
					margin-right: 16rpx;
					border-radius: 8rpx;
				}

				.top-label {
					margin-left: 30rpx;
					height: 40rpx;
					background: #fff;
					font-size: 24rpx;
					color: #222222;
				}

				.games-box {
					height: 128rpx;
					display: flex;
					background-color: #f7f8fb;
					align-items: center;
					padding-left: 30rpx;

					.gamesName-box {
						display: flex;
						flex-direction: column;
						width: 180rpx;
						text-align: center;


						.num {
							font-size: 24rpx;
							color: #222222;
						}
					}
				}

				.name {
					font-size: 28rpx;
					color: #222222;
				}

				.active-games-box {
					height: 128rpx;
					display: flex;
					background-color: #fff;
					align-items: center;
					padding-left: 30rpx;

					.gamesName-box {
						display: flex;
						flex-direction: column;
						width: 180rpx !important;
						text-align: center;
					}

					.active-name {
						font-size: 28rpx;
						color: #6f69e9;
						font-weight: 600;
					}

					.active-num {
						font-size: 24rpx;
						color: #6f69e9;
					}
				}
			}

			.right {
				flex: 1;
				padding: 52rpx 34rpx 0 40rpx;
				overflow: auto;

				.title {
					width: 100% !important;
					height: 72rpx;
					background: #f7f8fb;
					border-radius: 8rpx;
					text-align: center;
					line-height: 72rpx;
					font-size: 28rpx;
					color: #222222;
					margin-bottom: 10rpx;
				}

				.region-box {

					.region {
						background: #f7f8fb;
						border-radius: 8rpx;
						text-align: center;
						line-height: 72rpx;
						font-size: 28rpx;
						color: #222222;
						margin-bottom: 10rpx;
					}

				}

				.active-region {
					background: #f7f8fb;
					border-radius: 8rpx;
					text-align: center;
					line-height: 72rpx;
					font-size: 28rpx;
					color: #6f69e9;
					margin-bottom: 10rpx;
				}
			}
		}

		.border {
			width: calc(100% - 60rpx);
			height: 1rpx;
			background: rgba(217, 217, 217, 0.5);
			margin: 30rpx;
		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			padding: 0 30rpx 30rpx;

			.btn1,
			.btn2 {
				width: 334rpx;
				height: 84rpx;
				border-radius: 12rpx;
				text-align: center;
				line-height: 84rpx;
			}

			.btn1 {
				background-color: #f6f6f6;
			}

			.btn2 {
				color: #ffffff;
				// background: linear-gradient(270deg, #a7a1f6 0%, #6e68e9 100%);
				background-color: #6E68E9;
			}
		}
	}
</style>